<template>
	<view class="tab-box">
		<view class="tab-swiper">
			<view class="tab-header">
				<view
					class="tab-item"
					@click="tabClick(item, index)"
					v-for="(item, index) in orderDetail.order_combos"
					:key="item.id"
				>
					<view :class="{ active: tabIndex === index }">
						<text class="inner-text">{{ item.sku_name }}</text>
						<image v-if="tabIndex === index" :src="imgBaseUrl + 'tab-left-icon.png'" class="bg"></image>
						<image
							v-if="tabIndex + 1 === orderDetail.order_combos.length && tabIndex === index"
							:src="imgBaseUrl + 'tab-right-icon.png'"
							class="bg"
						></image>
					</view>
				</view>
			</view>
		</view>
		<view class="tab-content">
			<view class="ticket-code-wrap pos-rel flex-col flex-c pb-16">
				<view v-if="purchase.state === orderStatus.WAIT_CONFIRM">
					出票中，
					<text class="c-theme" @click.native.stop="handleUpdate">点击刷新</text>
				</view>
				<view class="c-black-_4" v-if="purchase.net_quantity === 0">订单已退款</view>
				<view class="pb-20 text-center font-500">{{ ticketCodeName }}</view>
				<!--待使用或已使用 -->
				<template v-if="vouchers.length > 1">
					<view class="pb-20 text-center">
						<text class="c-black-_9">{{ currentIndex + 1 }}</text>
						<text class="c-black-_2 mlr-5">/</text>
						<text class="c-black-_2">{{ vouchers.length }}</text>
					</view>
					<swiper class="swiper" :current="currentIndex" @change="handleSwiperChange">
						<block v-for="(item, index) in vouchers" :key="index">
							<swiper-item>
								<view class="code-wrap">
									<zjy-qrcode
										:text="item.voucher_code"
										:opacity="item.left_quantity == 0"
									></zjy-qrcode>
									<code-refund class="code-disabled" v-if="item.state == -10" />
								</view>
								<view class="text-center pt-10 fs-26 disabled-text" v-if="item.left_quantity == 0">
									<view class="text">已使用</view>
									<view class="date">{{ formatTimeWithoutSeconds(item.used_time) }}</view>
								</view>
								<view class="text-center code-text">
									{{ item.voucher_code }}
								</view>
							</swiper-item>
						</block>
					</swiper>
					<view
						class="arrow-circle arrow-circle-left"
						:class="currentIndex < 1 ? 'disabled' : ''"
						@tap="prev"
					></view>
					<view
						class="arrow-circle arrow-circle-right"
						:class="currentIndex == vouchers.length - 1 ? 'disabled' : ''"
						@tap="next"
					></view>
				</template>
				<template v-else>
					<block v-for="(item, index) in vouchers" :key="index">
						<view class="code-wrap">
							<zjy-qrcode :text="item.voucher_code" :opacity="item.left_quantity == 0"></zjy-qrcode>
							<code-refund class="code-disabled" v-if="item.state == -10" />
						</view>
						<view class="text-center pt-10 fs-26 disabled-text" v-if="item.left_quantity == 0">
							<view class="text">已使用</view>
							<view class="date">{{ formatTimeWithoutSeconds(item.used_time) }}</view>
						</view>
						<view class="text-center code-text">
							{{ item.voucher_code }}
						</view>
					</block>
				</template>
			</view>
		</view>

		<image :src="imgBaseUrl + 'circle-left-raduis.png'" class="circle-left"></image>
		<image :src="imgBaseUrl + 'circle-right-raduis.png'" class="circle-right"></image>
	</view>
</template>
<script setup lang="ts">
import { ref } from "vue"
import { OrderStatus } from "@/constants/order"
import { formatTimeWithoutSeconds } from "@/utils/tools"

const { orderDetail } = defineProps({
	orderDetail: {
		type: Object,
		default: () => ({}),
	},
})
const imgBaseUrl = inject("imgBaseUrl")
const orderStatus = OrderStatus
const currentIndex = ref(0)
const tabIndex = ref(0)
const emit = defineEmits(["getOrderDetail"])
const tabClick = (item: any, index: any) => {
	tabIndex.value = index
	currentIndex.value = 0
}
const handleUpdate = () => {
	emit("getOrderDetail")
}
//联票单个订单状态
const purchase = computed(() => {
	return orderDetail.order_combos[tabIndex.value]?.purchase || {}
})

//拿到二维码
const vouchers = computed(() => {
	return orderDetail.order_combos[tabIndex.value]?.vouchers || []
})

// 票码名字
const ticketCodeName = computed(() => {
	return orderDetail.order_combos[tabIndex.value]?.sku_name
})
//#region 二维码轮播
const handleSwiperChange = (event) => {
	currentIndex.value = event.detail.current
}
const prev = () => {
	if (currentIndex.value < 1) return
	currentIndex.value = (currentIndex.value - 1 + vouchers.value.length) % vouchers.value.length
}
const next = () => {
	if (currentIndex.value == vouchers.value.length - 1) return
	currentIndex.value = (currentIndex.value + 1) % vouchers.value.length
}
</script>
<style lang="scss" scoped>
.tab-box {
	margin-top: 42rpx;
	position: relative;
	min-height: 418rpx;
	border-radius: 16rpx;
	overflow: hidden;

	.circle-left {
		position: absolute;
		left: 0;
		top: 15rpx;
		width: 20rpx;
		height: 20rpx;
		z-index: 97;
	}

	.circle-right {
		position: absolute;
		right: 0;
		top: 15rpx;
		width: 20rpx;
		height: 20rpx;
		z-index: 97;
	}
	.tab-swiper {
		position: relative;
		height: 100rpx;
		overflow-x: scroll;
	}
	.tab-header {
		margin-top: 15rpx;
		height: 76rpx;
		line-height: 60rpx;
		border-radius: 16rpx 16rpx 0 0;
		display: flex;
		background-color: #efeff1;
		font-size: 18.8rpx;
		top: 2.12rpx;
		z-index: 0;

		.tab-item {
			position: relative;
			background-color: #efeff1;
			min-width: 156rpx;
			word-break: keep-all;
		}

		.inner-text {
			position: absolute;
			text-align: center;
			width: 100%;
			z-index: 99;
		}

		.bg {
			position: absolute;
			top: -10rpx;
			left: 0;
			width: 100%;
			height: 79rpx;
			z-index: 98;
		}
	}
	.tab-content {
		position: relative;
		top: -18rpx;
		z-index: 5;
		padding-top: 16rpx;
		border-top: none;
		height: 356.06rpx;
		border-top-right-radius: 16rpx;
		background: linear-gradient(180deg, #f9f9f9 0%, #ffffff 100%);
	}

	.ticket-code-wrap {
		position: relative;
		padding-top: 40rpx;
		.disabled-text {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 240rpx;
			height: 104rpx;
			background: #ffffff;
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			border: 2rpx solid #e5e6eb;
			display: flex;
			flex-direction: column;
			align-items: center;
			.date {
				font-size: 20rpx;
				color: #86909c;
				margin-top: 4rpx;
			}
		}

		.swiper {
			width: 240rpx;
			height: 320rpx;
		}

		.arrow-circle {
			position: absolute;
			top: calc(50% - 15px);
			width: 60rpx;
			height: 60rpx;
			display: inline-block;
			background-position: center center;
			background-size: cover;

			&.disabled {
				opacity: 0.5;
			}
		}

		.arrow-circle-right {
			right: 10px;
			background-image: url(#{$imgBaseUrl}/circle-left.png);
			transform: rotate(180deg);
		}

		.arrow-circle-left {
			left: 10px;
			background-image: url(#{$imgBaseUrl}/circle-left.png);
		}
	}
}
</style>
